<!-- 结算页面 -->
<template>
	<view>
		<nav_bar title='结算'></nav_bar>
		<view style="height: 56px;"></view>
		<view class="clearing">
			<view class='addAddress' @click="addShow = true">添加收货地址</view>
			<u-popup :show="addShow" mode="bottom" @close="close">
				<view style="padding: 20px;">
					<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
						<u-form-item label="姓名" borderBottom>
							<u--input disabled v-model="this.username" border="none"></u--input>
						</u-form-item>
						<u-form-item label="昵称" prop="name" borderBottom>
							<u--input v-model="model.name" border="none"></u--input>
						</u-form-item>
						<u-form-item label="电话" prop="phone" borderBottom>
							<u--input v-model="model.phone" border="none"></u--input>
						</u-form-item>
						<u-form-item label="地址" prop="address" borderBottom>
							<u--input v-model="model.address" border="none"></u--input>
						</u-form-item>
					</u--form>
					<u-button @click="submitAddress">提交</u-button>
				</view>
			</u-popup>
			<view class='addAddress' @click="show = true">选择收货地址</view>
			<u-popup :show="show" mode="top" @close="close">
				<view v-show='this.addressShow' style="padding: 20px;">
					<view v-for="(item,index) in addressList" :key="index">
						<view class="Address" @click="headleSelectAddress(item)">
							<view>姓名:&nbsp;<text>{{item.username}}</text>电话:&nbsp;<text>{{item.phone}}</text></view>
							<view>地址:&nbsp;<text>{{item.address}}</text></view>
						</view>
					</view>
				</view>
				<view v-show='!this.addressShow'>
					<u-empty text="暂无配送地址" icon="http://cdn.uviewui.com/uview/empty/history.png">
					</u-empty>
					<button @click="headleAddAddress" style="margin: 20px; color: #47ad47;" >添加收货地址</button>
				</view>
			</u-popup>
			<view class="AddressTitle">配送地址:</view>
			<view v-show='this.addressShow' class="Address">
				<view>姓名:&nbsp;<text>{{userInfo.username}}</text>电话:&nbsp;<text>{{userInfo.phone}}</text></view>
				<view>地址:&nbsp;<text>{{userInfo.address}}</text></view>
			</view>
			<view v-show='!this.addressShow' style="color: #aa0000;">请填写配送地址</view>
			<view class="goodsTitle">所购商品:</view>
			<view v-for="(item,index) in orderList" :key="index">
				<view class="clearingGoods">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view class="title">{{item.foodname}}</view>
						</u-col>
						<u-col span="1.5">
							<view style="text-align: right; color: #aa0000;"><b
									style="font-size: 18px;">{{item.price*item.num}}</b>¥</view>
						</u-col>
						<u-col span=".5" />
						<u-col span="4">
							<u-number-box :name="item.id" model={item.num} @change="valChange"></u-number-box>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>

		<view class="clearingFooter">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span=".2" />
				<u-col span="5">
					<view class="totalPrice">总价:<b style="font-size: 25px; color: #aa0000;">{{totalPrice }}</b>$</view>
				</u-col>
				<u-col span="2.6" />
				<u-col span="4">
					<view class="submait" @click="produceOrder">提交订单</view>
				</u-col>
				<u-col span=".2" />
			</u-row>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				show: false,
				addShow: false,
				addressShow: true,
				addressList: [],
				userInfo: {},
				model: {
					name: '',
					phone: '',
					address: '',
					username: ''
				},
				rules: {
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					'address': {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					}

				}
			}
		},
		onShow() {
			this.getUserAddress()
			uni.request({
				url: 'http://localhost:8002/admin/usersaddress',
				method: 'GET',
				data: {
					// 请求参数
					username: this.username
				},
				success: (res) => {
					// 请求成功的回调函数
					// console.log(res.data);
					let data = res.data
					this.addressList = data
					this.address = data[0]
				},
				fail: (err) => {
					// 请求失败的回调函数
					console.error(err);
				}
			});
		},
		computed: {
			// 商品列表
			...mapState(['orderList']),
			// 用户名
			...mapState(['username']),
			// 总价计算
			totalPrice() {
				let total = 0;
				this.orderList.forEach(item => {
					total += item.price * item.num;
				});
				return total.toFixed(2);
			}
		},
		methods: {
			// 商品数量更新
			valChange(e) {
				this.$store.commit('uploadGoodsNum', e)
			},
			// 选择地址
			headleSelectAddress(item) {
				this.userInfo = item
				this.show = false
			},
			// 弹出层点击空白关闭
			close() {
				this.show = false
				this.addShow = false
			},
			// 添加地址提交按钮
			submitAddress() {
				this.$refs.uForm.validate().then(async (res) => {
					uni.$u.toast('校验通过')
					this.model.username = this.username
					let data = await request({
						url: 'http://localhost:8002/admin/addaddress',
						method: 'POST',
						data: {
							...this.model
						}
					})

					this.addShow = false
					this.getUserAddress()
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 获取用户地址
			getUserAddress() {
				uni.request({
					url: 'http://localhost:8002/admin/usersaddress',
					method: 'GET',
					data: {
						username: this.username
					},
					success: (res) => {
						let data = res.data;
						if (data.length === 0) {
							this.addressShow = false
						} else {
							this.addressShow = true
							this.addressList = data;
							this.userInfo = data[0];
						}

					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			// 添加地址
			headleAddAddress(){
				this.show = false
				this.addShow = true
				
			},
			// 提交订单
			produceOrder() {
				console.log('我提它奶奶个腿');
			}
		},
	}
</script>

<style scoped lang="scss">
	.clearing {
		padding: 0 10px;
	}

	.addAddress {
		width: 150px;
		height: 35px;
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		font-size: 15px;
		margin: 5px 0;
		background-color: #47ad47;
		color: white;
	}

	.Address {
		line-height: 30px;
		margin-bottom: 10px;
		border-bottom: 1px dashed #47ad47;
		padding-left: 10px;

		text {
			margin-right: 30px;
			color: #47ad47;
		}
	}

	.goodsTitle {
		font-size: 14px;
	}

	.selectAddress {
		margin: 10px 0;
	}

	.clearingGoods {
		width: 100%;
		margin-top: 20px;
		border-bottom: solid 1px #ccc;
	}

	.clearingFooter {
		width: 100%;
		height: 60px;
		border-top: 1px solid #47ad47;
		position: fixed;
		bottom: 0;
	}

	.totalPrice {
		text-align: center;
		line-height: 60px;
	}

	.submait {
		width: 100%;
		height: 40px;
		line-height: 40px;

		text-align: center;
		color: white;
		border-radius: 5px;
		background-color: #47ad47;
	}
</style>